<template>
  <Modal
    v-model="modalShow"
    :title="$t('修改登录密码')"
    footer-hide
    width="500"
  >

  <div class="container-wrap">
    <div class="login-container">
      <div class="form-box">
        <div prop="phone" class="form-item">
            <input class="form-input" v-model="params.current_phone" readonly type="text" :placeholder="$t('当前登录手机')" />
        </div>
        <div prop="password" class="form-item">
            <input class="form-input" v-model="params.code" type="text" :placeholder="$t('请输入验证码')" />
            <span class="get-code" @click="sendSmsCode()">{{$t('获取验证码')}}</span>
        </div>
        <div prop="phone" class="form-item">
            <input class="form-input" v-model="params.new_pwd" type="password" :placeholder="$t('登录密码')" />
        </div>
        <div prop="phone" class="form-item">
            <input class="form-input" v-model="params.re_new_pwd" type="password" :placeholder="$t('确认密码')" />
        </div>
      </div>
    </div>
  </div>


    <div class="modal-bottom">
      <Button @click="onCancel">{{$t('取消')}}</Button>
      <Button type="error" @click="onConfirm">{{$t('提交')}}</Button>
    </div>
  </Modal>
</template>
<script>
export default {
  name: "AddAddress",
  data() {
    return {
      modalShow: false,
      params:{
        current_phone:'',
        phone:'',
        new_pwd:'',
        re_new_pwd:'',
        email:'',
        code:'',
        current:0,//0 手机号 1邮箱
      }
    };
  },
  components:{
    selectCountryList :()=>import('../authentication/countryList.vue')
  },
  methods: {
    handleRender(a) {
      this.params.current_phone = a.current_phone
      this.params.phone = a.current_phone
      this.modalShow = true;
    },
    onConfirm(){
      if(this.params.new_pwd==''){
        this.$Message.error({
          content:this.$t('密码不能为空')
        })
        return;
      }
      if(this.params.new_pwd != this.params.re_new_pwd){
        this.$Message.error({
          content:this.$t('两次密码不一致')
        })
        return;
      }
      this.$http.geteditpwd(this.params).then(res=>{
        const {status,mess} = res
        if(status===200){
          this.$Message.success({
            content:mess,
            duration: 4,
            closable: true
         });
          this.modalShow = false;
        }
      })
    },

    onCancel(){
      this.modalShow = false;
    },

    sendSmsCode(){
      this.$http.getSmsCode({type:3,phone:this.params.phone}).then(res=>{
        const {status,mess} = res
        if(status===200){
          this.$Message.success({
            content:mess,
            duration: 4,
            closable: true
         });
        }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
  .container{
    &-wrap{
    width: 100%;
    margin: 0 auto;
    height: 300px;
    }
    &-bg{
      position: absolute;
      left: 0;
      top:0;
      width: 100%;
    }
  }

  .login-container {
  }

  .form{
    &-box{
    background-color: #Fff;
    }
    &-tab{
      display: flex;
      cursor: pointer;
      justify-content: space-around;
      margin-bottom: 30px;
      &-name{
        font-size: 20px;
        font-weight: 500;
        transition: all 0.4s;
        &-active{
          color: #e2231a;
        }
      }
    }
  }
  .main-btn{
   height: 50px;
   background-color: #e2231a;
   border-radius: 0;
  }

  .form{
    &-item{
      display: flex;
      align-items: center;
      border:1px solid #dcdcdc;
      margin:20px 0;
    }
    &-input{
      width:380px;
      border: none;
      padding:0 15px;
      height: 48px;
      outline: 0;
      color:#666;

    }
    &-label{
      padding:0 24px;
      height: 48px;
      line-height: 48px;
      border-right:1px solid #dcdcdc
    }
  }
  .bottom{
    text-align: center;
    color:#bcbcbc;
    margin-top: 20px;
    &-link{
      color:#e2231a;
    }
  }

  .policy{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    cursor: pointer;
    &-a{
      color:#e2231a;
    }
    &-left{
      display: flex;
      align-items: center;

    }
    &-dot{
      width:16px;
      height: 16px;
      border-radius: 80px;
      border: 1px solid #dcdcdc;
      flex-shrink: 0;
      display: inline-block;
      margin-right: 5px;
    }

  }

  /deep/ .ivu-input-wrapper{
    width:100%;
  }
  /deep/ .ivu-btn-error{
    height: 32px;
  }
  </style>

